<html>
<head>
    <meta charset="utf-8">
    <script src="../lib/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: 'Open Sans', sans-serif;
            background-color: #FFFAF6;
        }
        /*Basic Phone styling*/

        .phone {
            border: 40px solid #ddd;
            border-width: 55px 7px;
            border-radius: 40px;
            margin: 50px auto;
            overflow: hidden;
            transition: all 0.5s ease;
        }

        .phone iframe {
            border: 0;
            width: 100%;
            height: 100%;
        }
        /*Different Perspectives*/

        .phone.view_1 {
            transform: rotateX(50deg) rotateY(0deg) rotateZ(-50deg);
            box-shadow: -3px 3px 0 #BBB, -6px 6px 0 #BBB, -9px 9px 0 #BBB, -12px 12px 0 #BBB, -14px 10px 20px #666;
        }

        .phone.view_2 {
            transform: rotateX(0deg) rotateY(-60deg) rotateZ(0deg);
            box-shadow: 5px 1px 0 #BBB, 9px 2px 0 #BBB, 12px 3px 0 #BBB, 15px 4px 0 #BBB, 0 7px 20px #999;
        }

        .phone.view_3 {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #666;
        }
        /*Controls*/

        #controls {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 0.9em;
            color: #333;
        }

        #controls div {
            margin: 10px;
        }

        #controls div label {
            width: 120px;
            display: block;
            float: left;
        }

        #views {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 200px;
        }

        #views button {
            width: 198px;
            border: 1px solid #bbb;
            background-color: rgba(0,0,0,0.6);
            height: 40px;
            margin: 10px 0;
            color: white;
            transition: all 0.2s;
        }

        #views button:hover {
            color: white;
            background-color: rgba(0,0,0,0.8);
        }
        #wrapper-wall{
            display: flex;
            flex-wrap:wrap;
            justify-content:center;
        }
        @media (max-width:900px) {
            .wrapper {
                transform: scale(0.8, 0.8);
            }
        }

        @media (max-width:700px) {
            .wrapper {
                transform: scale(0.6, 0.6);
            }
        }

        @media (max-width:500px) {
            .wrapper {
                transform: scale(0.4, 0.4);
            }
        }
        .wrapper{
            display: inline-block;
            padding: 10px;
        }
    </style>

</head>
<body>
<!--The Main Thing-->
<div id="wrapper-wall">
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="login.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="regist1.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="regist2.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="regist3.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="simpleList.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="regist3.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="login.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="regist3.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="login.html" class="frame"></iframe>
        </div>
    </div>
    <div class="wrapper">
        <div class="phone view_3">
            <iframe src="login.html" class="frame"></iframe>
        </div>
    </div>
</div>
<!--Controls etc.-->
<div id="controls">
        <label for="iframeURL">URL:</label>
        <input type="text" id="iframeURL" placeholder="" value="login.html" />
        <label for="iframeWidth">Width:</label>
        <input type="number" id="iframeWidth" placeholder="375" value="375" />
        <label for="iframeHeight">Height:</label>
        <input type="number" id="iframeHeight" placeholder="667" value="667" />
    <!--Idea by /u/aerosole-->
        <label for="iframePerspective">Add perspective:</label>
        <input type="checkbox" id="iframePerspective" checked="true" />
</div>
<div id="views">
    <button value="1">View 1 - Laying</button>
    <button value="2">View 2 - Side</button>
    <button value="3">View 3 - Front</button>
</div>
</body>
<script>
    /*Only needed for the controls*/
//    var phone = document.getElementById("phone_1"),
//        iframe = document.getElementById("frame_1");

    var phone=$('.phone'),
        iframe=$('.iframe');
    /*View*/
    function updateView(view) {
        if (view) {
            phone.removeClass();
            phone.addClass("phone view_" + view);
        }
    }

    /*Controls*/
    function updateIframe() {
        iframe.attr('src', document.getElementById("iframeURL").value);

        phone.css('width', document.getElementById("iframeWidth").value + "px");
        phone.css('height' , document.getElementById("iframeHeight").value + "px");

        /*Idea by /u/aerosole*/
        $(".wrapper").css('perspective',(
            document.getElementById("iframePerspective").checked ? "1000px" : "none"
        ));
    }
    updateIframe();

    /*Events*/
    document.getElementById("controls").addEventListener("change", function() {
        updateIframe();
    });

    document.getElementById("views").addEventListener("click", function(evt) {
        updateView(evt.target.value);
    });
</script>
</html>